<template>
	<view style="width: 100%;height: 100%;">
		<button class="but" type="default" @click="gonewpage">完整早报</button>
		<u-field v-model="week" label="星期几" placeholder=""></u-field>
		<u-field v-model="year" label="年" placeholder=""></u-field>
		<u-field v-model="date" label="日期" placeholder=""></u-field>
		<u-field v-model="noli" label="农历" placeholder=""></u-field>
		<button class="but" type="default" @click="update">确认</button>
		<canvas canvas-id="canvas" id="canvas"></canvas>
		<!-- <button class="but" type="default" @click="showPickerColorPop">背景颜色选择</button> -->
		<button class="but" type="default" @click="exportImage">保存图片</button>
		<canvas canvas-id="canvas2" id="canvas2"></canvas>
		<button class="but" type="default" @click="exportImage2">保存图片</button>
	</view>
</template>

<script>
	import Painter from "mp-painter";
	export default {
		data() {
			return {
				week: '星期五',
				datalist: {},
				color: '#06c1ac',
				showPickerColor: false,
				year: '2021',
				date: '12-17',
				noli: '冬月十三',
			};
		},
		async onReady() {
			let timestamp = +new Date()
			const db = uniCloud.database()
			let res = await db.collection('mor_news').where({
				date: this.$u.timeFormat(timestamp, 'yyyy-mm-dd')
			}).get({
				getOne: true
			})
			this.datalist = res.result.data
			let painter = new Painter(uni.createCanvasContext("canvas"));
			await painter.draw({
				"type": "container",
				"direction": "vertical",
				width: 750,
				height: 1500,
				"children": [{
						"position": "absolute",
						top: 0,
						left: 0,
						"type": "image",
						src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1c8d9cf3-f03e-430f-963d-3d8e19d65dbe/2666502c-fa69-4203-9efd-64bc1d495022.jpg",
						width: 750,
						height: 1500,
						// objectFit: "contain",
						objectFit: "cover",
						objectPosition: ["center", "top"]
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 190,
						left: 210,
						width: 500,
						color: '#f25517',
						fontSize: 120,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": '星期五'
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 210,
						left: 617,
						width: 500,
						color: '#f25517',
						fontSize: 40,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.year
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 270,
						left: 610,
						width: 510,
						color: '#f25517',
						fontSize: 40,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.date
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 210,
						left: 67,
						width: 500,
						color: '#f25517',
						fontSize: 40,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": '农历'
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 270,
						left: 40,
						width: 510,
						color: '#f25517',
						fontSize: 38,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.noli
					},
					{
						"type": "rect",
						"top": 340,
						left: 20,
						"background": "#456",
						"width": 700,
						"height": 3
					},
					{
						type: "container",
						direction: "vertical",
						top: 10,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[0]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[1]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[2]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[3]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[4]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[5]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[6]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[7]
							},
						]
					}
				]

			});
			let painter1 = new Painter(uni.createCanvasContext("canvas2"));
			await painter1.draw({
				"type": "container",
				"direction": "vertical",
				width: 750,
				height: 1500,
				"children": [{
						"position": "absolute",
						top: 0,
						left: 0,
						"type": "image",
						src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1c8d9cf3-f03e-430f-963d-3d8e19d65dbe/2666502c-fa69-4203-9efd-64bc1d495022.jpg",
						width: 750,
						height: 1500,
						// objectFit: "contain",
						objectFit: "cover",
						objectPosition: ["center", "top"]
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 190,
						left: 210,
						width: 500,
						color: '#f25517',
						fontSize: 120,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.week
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 210,
						left: 617,
						width: 500,
						color: '#f25517',
						fontSize: 40,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.year
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 270,
						left: 610,
						width: 510,
						color: '#f25517',
						fontSize: 40,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.date
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 210,
						left: 67,
						width: 500,
						color: '#f25517',
						fontSize: 40,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": '农历'
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 270,
						left: 40,
						width: 510,
						color: '#f25517',
						fontSize: 38,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.noli
					},
					{
						"type": "rect",
						"top": 340,
						left: 20,
						"background": "#456",
						"width": 700,
						"height": 3
					},
					{
						type: "container",
						direction: "vertical",
						top: 10,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[8]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[9]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[10]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[11]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[12]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[13]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.news[14]
							},
							{
								"type": "rect",
								top: 10,
								left: 0,
								"background": "#456",
								"width": 660,
								"height": 3
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								width: 660,
								top: 10,
								color: '#000',
								fontSize: 30,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist.weiyu
							},
						]
					}
				]

			});
		},
		onLoad(option) {
			this.week=option.w
			this.year=option.y
			this.date=option.d
			this.noli=option.n
		},
		methods: {
			async getdata() {
				let timestamp = +new Date()
				const db = uniCloud.database()
				let res = await db.collection('mor_news').where({
					date: this.$u.timeFormat(timestamp, 'yyyy-mm-dd')
				}).get({
					getOne: true
				})
				if (res.result.code === 0) {
					console.log(res.result.data);
					this.datalist = res.result.data
				} else {

				}
			},
			getPickerColor(color) {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				});
				/* 隐藏弹窗 */
				this.showPickerColor = false;
				/* 判断颜色值是否有效 */
				if (color) {
					this.color = color;
					setTimeout(res => {
						uni.hideLoading();
						this.update()
					}, 1500)
				}
			},
			gonewpage(){
				uni.navigateTo({
					url:'../zao_news'
				})
			},
			update() {
				let path;
				let navigateMethod;
				// #ifdef H5
				path = this.$route.path;
				navigateMethod = uni.navigateTo;
				// #endif
				// #ifndef H5
				path = (pages => "/" + pages[pages.length - 1].route)(getCurrentPages());
				navigateMethod = uni.redirectTo;
				// #endif
				navigateMethod.call(null, {
					url: path + `?w=${this.week}&y=${this.year}&d=${this.date}&n=${this.noli}`
				});
			},
			exportImage() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});
				/**
				 * 在 uni-app:h5 中下载
				 * uni app 未在 h5 中实现 saveImageToPhotosAlbum
				 * @param {string} base64
				 */
				const donwloadBase64 = base64 => {
					const a = document.createElement("a");
					a.href = base64;
					a.download = "mp-painter-playground-export.jpg";
					a.click();
				}
				uni.canvasToTempFilePath({
					canvasId: "canvas",
					fileType: "jpg",
					success: res => {
						console.log(res);
						// #ifdef H5
						donwloadBase64(res.tempFilePath)
						uni.hideLoading();
						// #endif
						// #ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							}
						})
						// #endif
					}
				})
			},
			exportImage2() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});
				/**
				 * 在 uni-app:h5 中下载
				 * uni app 未在 h5 中实现 saveImageToPhotosAlbum
				 * @param {string} base64
				 */
				const donwloadBase64 = base64 => {
					const a = document.createElement("a");
					a.href = base64;
					a.download = "mp-painter-playground-export.jpg";
					a.click();
				}
				uni.canvasToTempFilePath({
					canvasId: "canvas2",
					fileType: "jpg",
					success: res => {
						console.log(res);
						// #ifdef H5
						donwloadBase64(res.tempFilePath)
						uni.hideLoading();
						// #endif
						// #ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							}
						})
						// #endif
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.od {
		object-fit: contain;
		position: absolute;
	}

	#canvas {
		width: 750rpx;
		height: 1500rpx;
	}

	#canvas2 {
		width: 750rpx;
		height: 1500rpx;
	}

	.but {
		width: 45%;
		font-weight: bold;
		margin: 30rpx auto;
		background-color: #ff9900;
		color: #fff;
	}
</style>
